<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link type="text/css" rel="stylesheet" href="../static/css/common.min.css">
    <link type="text/css" rel="stylesheet" href="../static/css/learnPark.min.css">
    <script src="../static/js/jquery-1.12.3.min.js"></script>
    <script src="../static/js/flexible.min.js"></script>
    <script src="../static/js/learnPark.min.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <title>51Talk之星 中华少年说</title>
</head>

<body>
    <div id="yuko-root">
        <div id="yuko-header">
            <div id="yuko-next">下一个</div>
            <a id="yuko-back" href="./index.html">
                <div>返回首页</div>
            </a>
        </div>
        <div id="yuko-main">
            <div id="yuko-videotitle">
                <p>Tim老师聊非遗-京剧</p>
                <span>中国国粹京剧的表演方式与表演艺术</span>
            </div>
            <div id="yuko-videoplay">
                <img id="yuko-videoplay-bg" src="../static/images/learnPark/video_box2.png" />
                <div id="yuko-videoplay-video">
                    <video src="http://demo.lanrenzhijia.com/demo/51/5183/demo/vedio/sintel.mp4" poster="../static/images/uploadVideo/video_pic.png" playsinline controls="false"
                         x5-playsinline="" playsinline="" webkit-playsinline=""></video>
                </div>
                <img class="poster-img" src="../static/images/uploadVideo/video_pic.png" />
                <img id="yuko-videoplay-icon" src="../static/images/learnPark/video_play.png" />
            </div>
            <div id="yuko-videodesc">
                视频介绍: 京剧, 曾称平剧, 中国五大戏曲剧种之一,场景布置注重写意，腔调以西皮、二黄为主，用胡琴和锣鼓等伴奏，被视为中国国粹，中国戏曲三鼎甲“榜首”。徽剧是京剧的前身。
            </div>
            <div id="yuko-recordplay">
                <a id="yuko-recordplay-enroll" href="./enroll.html"></a>
                <div class="yuko-recordplay-part" id="yuko-recordplay-part1"></div>
                <div class="yuko-recordplay-part" id="yuko-recordplay-text">
                    <div id="yuko-recordplay-en">
                        Peking Opera has traveled all over the world, with Beijing as its center and throughout China. It has become an important
                        medium for introducing and disseminating Chinese traditional art and culture.
                    </div>
                    <div id="yuko-recordplay-cn">
                        京剧走遍世界各地，分布地以北京为中心，遍及中国，成为介绍、传播中国传统艺术文化的重要媒介。
                    </div>
                </div>
                <div class="yuko-recordplay-part" id="yuko-recordplay-part3">
                    <div id="yuko-recordplay-opr">
                        <div id="yuko-recordplay-play"></div>
                        <div id="yuko-recordplay-record">
                            <div class="yuko-toggletip not-display">
                                <p class="time">00:00</p>
                                <p class="word">点击完成录音 正计时</p>
                            </div>
                        </div>
                        <div id="yuko-recordplay-read"></div>
                    </div>
                </div>
            </div>
            <div id="yuko-generate">

            </div>
        </div>
        <!-- 原声音频 -->
        <audio id="player" style="display:none">
            <source src="xxx.mp3" type="audio/mpeg">
                你的浏览器不支持html5的audio标签
        </audio>
    </div>
    <script>
        //获取标题、子标题、介绍、跟读内容、跟读内容音频地址
        let getContentAjax = () => {
            $.ajax({
                url: "test.json",//后端链接
                type: "post",
                data: {},
                dataType: "json",
                success: function(data){
                    setContent(data.title,data.subtitle,data.description,data.readEnglish,data.readChinese,data.audio);//执行插入数据,传入数据
                    console.log(data);//可修改，success处理
                },
                error: function(data){
                    console.log(data);
                }
            });
        }

        $(function () {
            $('#yuko-videodesc,#yuko-recordplay-en').css('-webkit-box-orient','vertical');

            //报名按钮
            $.ajax({
                url: "test.json",//后端链接
                type: "post",
                data: {},
                dataType: "json",
                success: function(isEnroll){
                    //判断是否去掉报名按钮
                    if(!isEnroll){
                        $('#yuko-recordplay-enroll').addClass('not-display');
                    }
                },
                error: function(data){
                    console.log(data);
                }
            });

            /**
             * 下一站按钮点击事件
             * 跳转到下一站页面
             */
            $('#yuko-next').on('touchend', function (evt) {
                // TODO
                console.log('跳转到下一站');
            })

            var isRecordTouched = false,    // 录音是否按下
                isRecordPlaying = false,    // 录音是否正在播放
                isVoicePlaying = false,     // 音频是否正在播放
                recordLocalId;              // 录音音频本地 id
            /**
             * 录音相关按钮点击事件
             */
            var playProInter,flagPlay=0,timeCal,timeData=0;
            //状态
            //开始状态
            var initial = function(){
                $('#yuko-recordplay-play').css('background-image','url(../static/images/learnPark/voice_ready.png)');
                $('#yuko-recordplay-record').css('background-image','url(../static/images/learnPark/voice_record.png)');
                $('#yuko-recordplay-read').css('background-image','url(../static/images/learnPark/blank.png)');
            }
            initial();


            //时间变化
            var silceNum = function(num){
                return num > 9 ? num.toString() : '0'+num.toString();
            }
            var timeMove = function(){
                timeCal = setInterval(function() {
                    timeData++;
                    
                    if(timeData<60){
                        $('.yuko-toggletip .time').text('00:'+silceNum(timeData))
                    }else{
                        var timeMin = Math.floor(timeData/60),
                            timeSec = timeData%60;
                        $('.yuko-toggletip .time').text(silceNum(timeMin)+':'+silceNum(timeSec))
                    }
                }, 1000);
            };

            //播放原声
            var playPro = function(){
                $('#yuko-recordplay-play').css('background-image','url(../static/images/learnPark/voice_play.gif)');
                $('#player').get(0).play();
            }

            //停止原声
            var pausePro = function(){
                clearInterval(playProInter);
                $('#yuko-recordplay-play').css('background-image','url(../static/images/learnPark/voice_ready.png)');
                $('#player').get(0).pause();
            }

            //开始录音
            var record = function(){
                $('#yuko-recordplay-record').css('background-image','url(../static/images/learnPark/voice_record2.png)');
                $('.yuko-toggletip').removeClass('not-display')
                timeMove()
            }

            var isRecordEnd = false;
            //停止录音
            var recordStop = function(){
                $('#yuko-recordplay-record').css('background-image','url(../static/images/learnPark/voice_record.png)');
                setTimeout(() => {
                    $('.yuko-toggletip').addClass('not-display');
                    $('.yuko-toggletip .time').text('00:00');
                }, 500);
                timeData=0;
                clearInterval(timeCal);
            }

            //通过验证打分
            var pass = function(){
                $('#yuko-recordplay-record').css('background-image','url(../static/images/learnPark/voice_record3.png)');
                readStop();
                isRecordEnd = true;
            }

            //未通过验证打分
            var unPass = function(){
                $('#yuko-recordplay-record').css('background-image','url(../static/images/learnPark/voice_record4.png)');
                readStop();
                isRecordEnd = true;
            }

            //我的录音停止
            var readStop = function(){
                $('#yuko-recordplay-read').css('background-image','url(../static/images/learnPark/voice_read.png)');
            }

            //我的录音播放
            var readPlay = function(){
                $('#yuko-recordplay-read').css('background-image','url(../static/images/learnPark/voice_read2.png)');
            }

            //监听原声播放结束
            $('#player').get(0).addEventListener('ended', function () {  
                pausePro()
            }, false);

            //录音相关方法及上传需调用微信JS-SDK，相关参数需后台传入,具体配置请参考API：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
            var isRecording=false;
            $('#yuko-recordplay-record').on('click', function (evt) {
                var tar = evt.target;
                if(!isRecording){
                    isRecording = true;
                    /*
                    * 开始录音
                    * 此处调用微信录音相关接口获取录音权限并开始录音
                    wx.startRecord();
                    */
                    // TODO
                    record();
                    console.log('开始录音');
                    
                }else{
                    isRecording = false;
                    recordStop();
                    /*
                        * 结束录音 并 上传
                        * 此处调用微信录音相关接口获取录音权限并停止录音，上传录音
                        wx.stopRecord({
                            success: function (res) {
                                recordLocalId = res.localId;
                                wx.uploadVoice({
                                    localId: res.localId, // 需要上传的音频的本地ID，由stopRecord接口获得
                                    isShowProgressTips: 1, // 默认为1，显示进度提示
                                    success: function (res) {
                                        var serverId = res.serverId; // 返回音频的服务器端ID
                                    }
                                });
                            }
                        });
                        */
                    // TODO
                    //验证
                    var valide = true;
                    if(valide){
                        setTimeout(pass,1000); //通过验证
                    }else{
                        setTimeout(unPass,1000); //未通过验证
                    }

                    console.log('结束录音');
                }
            });

            $('#yuko-recordplay').on('touchend', function (evt) {
                var tar = evt.target;
                //isRecordTouched = false;
                switch (tar.id) {
                    case 'yuko-recordplay-read':
                        if (!isRecordPlaying && isRecordEnd) {
                            /*
                             * 播放录音
                                if(recordLocalId) {
                                    wx.playVoice({
                                        localId: recordLocalId
                                    });
                                }
                            */
                            // TODO
                            readPlay();
                            isRecordPlaying = true;
                            console.log('播放录音');
                        } else if(isRecordEnd){
                            /*
                            * 停止播放录音
                            if(recordLocalId) {
                                    wx.stopVoice({
                                        localId: recordLocalId
                                    });
                            }
                            */
                            // TODO
                            readStop();
                            isRecordPlaying = false;
                            console.log('停止播放录音');
                        }

                        break;
                        
                    case 'yuko-recordplay-play':
                        if (!isVoicePlaying) {

                            // 播放音频
                            // TODO
                            isVoicePlaying = true;
                            playPro();
                            console.log('播放音频');
                        } else {
                            // 停止音频
                            // TODO
                            isVoicePlaying = false;
                            pausePro();
                            console.log('停止播放音频');
                        }

                        break;
                    default:
                        break;
                }
            });

            /**
             * 朋友圈分享按钮点击事件
             */
            $('#yuko-generate').on('touchend', function (evt) {

                window.location = '';

            });
        });
    </script>
</body>

</html>